<template>
	<div v-loading="loading"  element-loading-text="拼命加载中" class="dashboard-container">
		<div class="app-container">
			<el-card class="tree-card">
				<treeTools @addDepts="addDepts" :isRoot="true" :treeNode="company"></treeTools>
				<el-tree :data="departs" :props="defaultProps" default-expand-all>
					<template v-slot="{data}">
						<treeTools @editDepts="editDepts" @addDepts="addDepts" :treeNode="data"
							@delDepts="getDepartments"></treeTools>
					</template>
				</el-tree>
			</el-card>

			<AddDept ref="addDept" @addDepts="getDepartments" :treeNode="node" :showDialog.sync="showDialog"></AddDept>
		</div>
	</div>
</template>

<script>
	import AddDept from './components/add-dept'
	import TreeTools from './components/tree-tools.vue'
	import {
		getDepartments
	} from '@/api/departments'
	import {
		tranListToTreeData
	} from '@/utils/index.js'

	export default {
		components: {
			TreeTools,
			AddDept
		},

		data() {
			return {
				company: {},
				defaultProps: {
					label: 'name'
				},
				departs: [],
				showDialog: false,
				node: null,
				loading: false
			}
		},

		created() {
			this.getDepartments()
		},

		methods: {
			async getDepartments() {
				this.loading = true
				const result = await getDepartments()
				this.company = {
					name: 'xxx股份有限公司',
					manager: '负责人'
				}
				this.departs = tranListToTreeData(result.depts, '')
				this.loading = false
			},

			addDepts(node) {
				this.showDialog = true
				this.node = node
			},

			editDepts(node) {
				this.showDialog = true
				this.node = node 
				this.$refs.addDept.getDepartDetail(node.id)
			}
		},
	}
</script>

<style scoped>
	.tree-card {
		padding: 30px 140px;
		font-size: 14px;
	}
</style>
